<template>
    <div class="message-board">
      <h2>留言板</h2>
      <!-- 留言输入框 -->
      <div class="input-section">
        <textarea
          v-model="newMessage"
          placeholder="在此输入留言..."
          :rows="textareaRows"
          cols="50"
          @input="adjustTextareaRows"
          ref="messageInput"
        ></textarea>
        <button @click="addMessage" :disabled="!newMessage">提交留言</button>
      </div>
      <!-- 留言列表 -->
      <div class="messages">
        <ul>
          <li v-for="(message, index) in messages" :key="index">
            <div class="message-item">
              <div class="message-content-container">
                <span class="username">{{ message.username }}：</span>
                <span class="message-content">{{ message.message }}</span>
              </div>
              <span class="message-date">{{ formatDateTime(message.createdAt) }}</span>
            </div>
          </li>
        </ul>
      </div>
    </div>
</template>
  
<script>
  import { findAllMessage,addMessage } from '../../api/user.js';
  export default {
    name: 'MessageBoard',
    data() {
      return {
        newMessage: '', 
        messages: [],   
        textareaRows: 4, 
      };
    },
    methods: {
      async fetchMessages() {
        try {
          const response = await findAllMessage();
          this.messages = response.data.data;
        } catch (error) {
          console.error('Error fetching messages:', error);
        }
      },
      adjustTextareaRows() {
        const textarea = this.$refs.messageInput;
        const lineHeight = 20; 
        const lines = Math.floor(textarea.scrollHeight / lineHeight);
        this.textareaRows = lines < 4 ? 4 : lines; 
      },
      async addMessage() {
  const a=  JSON.parse( localStorage.getItem('user'))
        if (this.newMessage.trim()) {
          const message = {
            username: a.nickname,
            message: this.newMessage.trim(), // 确保这里使用的是 'message' 而不是 'content'
            createdAt: new Date(),
          };
          addMessage(message).then(response => {
            if(response.data.code === 1){ // 假设成功的响应码是1
              this.messages.push(message);
              this.newMessage = '';
              this.textareaRows = 4;
            } else {
              console.error('Failed to add message:', response.data.message);
            }
          }).catch(error => {
            console.error('Error adding message:', error);
          });
        }
      },  formatDateTime(dateTime) {
        // 假设dateTime是ISO格式的字符串
        const date = new Date(dateTime);
        return date.toLocaleString(); // 格式化为本地时间字符串
      }
    },
    mounted() {
      this.fetchMessages();
      this.adjustTextareaRows(); 
    }
  };
</script>
  
<style scoped>
.message-board {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    border: 2px solid #ccc;
    padding: 20px;
    width: 800px;
    margin: 0 auto;
    background-color: #f9f9f9;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    overflow-y: auto;
} 
h2 {
    text-align: center;
    font-size: 1.8em;
    color: #333;
    margin-bottom: 30px;
    font-weight: bold;
}
.input-section {
    margin-bottom: 25px;
    position: relative;
}
textarea {
    width: 700px;
    padding: 12px;
    border-radius: 10px;
    border: 1px solid #ddd;
    font-size: 1.1em;
    background-color: #fff;
    resize: none;
    outline: none;
    transition: border-color 0.3s ease;
}
textarea:focus {
    border-color: #007bff;
}
button {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    padding: 12px 25px;
    background-color: #007bff;
    color: #fff;
    border: none;
    border-radius: 25px;
    font-size: 1em;
    cursor: pointer;
    transition: background-color 0.3s ease;
    margin-top: 90px;
    margin-right: 330px;
}
button:disabled {
    background-color: #d6d6d6;
    cursor: not-allowed;
}
button:hover:not(:disabled) {
    background-color: #0056b3;
}
.messages {
    margin-top: 80px;
}
ul {
    list-style-type: none;
    padding: 0;
}
li {
    background-color: #fff;
    border: 1px solid #ddd;
    padding: 15px;
    border-radius: 10px;
    margin-bottom: 15px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
li:hover {
    transform: scale(1.02);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
}
.message-item {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}
.message-content-container {
    display: flex;
    align-items: flex-start;
    max-width: 85%;
}
.username {
    font-weight: bold;
    color: #007bff;
    font-size: 1.1em;
}
.message-content {
    margin-left: 12px;
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: pre-wrap;
    max-width: 300px;
    text-align: left;
    font-size: 1em;
    color: #333;
}
.message-date {
    margin-left: 20px;
    color: #aaa;
    font-size: 0.9em;
    white-space: nowrap;
}
</style>